<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	body{

			background-color: black;
	}
		#i{
			text-align: center;
			margin-top:300px;
			font-size: 200px;
			font-family: Microsoft YaHei;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div id="i"></div>
</body>
</html>
<script type="text/javascript">
 	window.onload = function() {
		    var i = document.getElementById('i');
			var color = ['red', 'green', 'yellow', 'blue', 'white', 'purple','gold', 'orange', 'gray', 'pink', 'maroon'];
	setInterval(function(){
			var today=new Date();
			var h=today.getHours();
			var m=today.getMinutes();
			var s=today.getSeconds();
			a = h+":"+m+":"+s;
			document.getElementById('i').innerHTML=a
			 var radom = Math.floor(Math.random() * color.length); 
      		i.style.color = color[radom]; 
		},1000);
		}
	</script>